<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
        	*{
        		outline:none;
        	}
        </style>
    </head>
    <body>
		<div ng-app="myApp" >
			<div ng-controller="regCtr">
		  <div class="form-group" >
		  <h1 class="text-center">请用户注册</h1>
		    <label for="username">用户名</label>
		    <input type="text" class="form-control" ng-model="username" id="username" placeholder="username">
		  </div>
		  <div class="form-group">
		    <label for="password">密码</label>
		    <input type="password" class="form-control" ng-model="password" id="password" placeholder="password">
		  </div>
          <div class="form-group">
            <label for="cfpassword">请再次输入密码</label>
            <input type="password" class="form-control" ng-model="cfpassword" id="cfpassword" placeholder="password">
          </div>
		  
		  <button class="btn btn-success" ng-click="confirm()">确定</button>
		  <button class="btn btn-primary pull-right" ng-click="log()">登录</button>


		  <div class="alert alert-danger alert-dismissible" ng-cloak ng-show="only" role="alert">
			  <button type="button" class="close"><span  ng-click="fornone()">&times;</span></button>
			  <strong>错误!</strong> 用户名已被注册
		  </div>
          <div class="alert alert-danger alert-dismissible" ng-cloak ng-show="kong" role="alert">
              <button type="button" class="close"><span  ng-click="fornone()">&times;</span></button>
              <strong>错误!</strong> 信息不能为空
          </div>
          <div class="alert alert-danger alert-dismissible" ng-cloak ng-show="equal" role="alert">
              <button type="button" class="close"><span  ng-click="fornone()">&times;</span></button>
              <strong>错误!</strong> 两次密码不相同
          </div>
		  </div>
		</div>
	
	<script src='js/jquery-1.11.1.js'></script>
    <script src="js/angular.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    		var app = angular.module('myApp',[]);
    		app.controller('regCtr',function($scope){
    			$scope.kong = false;
                $scope.only = false;
                $scope.equal = false;
    			$scope.confirm = function(){
    				let username = angular.element('#username').val();
    				let password = angular.element('#password').val();
                    let cfpassword = angular.element('#cfpassword').val();
                    if(username==""||password==""||cfpassword==""){
                        $scope.kong = true
                    }else if(password!==cfpassword){     
                        $scope.equal = true
                    }else{
                        let data = {
                        username:username,
                        password:password
                    }
                    $.post('http://localhost:3000/register',data,function(data,textStatus,xhr){
                        console.log(data)
                        if(String(data)=="only"){
                            $scope.$apply(function(){
                                $scope.only = true;
                            })                          
                        }else{
                            window.location.href = "http://localhost:3000/logpage";
                        }
                    })
                    }
    				
    			}
    			$scope.log = function(){
    				window.location.href = "http://localhost:3000/logpage";
    			}
    			$scope.fornone = function(){
    				$scope.only = false;
                    $scope.equal = false;
                    $scope.kong = false;
    				
    			}
    		})
    </script>
    </body>
</html>